<!-- 缺失整改弹窗 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="缺失整改" width="960px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-row>
        <px-col :span="24">
          <px-form-item label="整改措施" prop="rectifyMeasure">
            <px-input
              v-model="formValue.rectifyMeasure"
              style="width: 100%"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              maxlength="1000"
              placeholder="请输入整改措施"
            />
          </px-form-item>
        </px-col>
        <px-col :span="24">
          <px-form-item label="整改后照片" prop="rectifyPictures">
            <PhotoUpload
              photoType="add"
              :photoData="{ moduleName: 'ifp-digitaltwins' }"
              :photoList="formValue.rectifyPictures"
              @changePhotoList="changePhotoList"
              @savePhotoStatus="savePhotoStatus"
            />
          </px-form-item>
        </px-col>
      </px-row>
    </px-form>
    <div style="margin-top: 56px; text-align: right">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)" :disabled="photoStatusFlag">保存</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from "vue";
import { PxMessage } from "px-ui";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { rectifyDefect } from "@/api/defect";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "missingId"]);

const visible = computed(() => props.dialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  formValue: {
    rectifyMeasure: "",
    rectifyPictures: ""
  },
  photoStatusFlag: false
});
const { formValue, photoStatusFlag } = toRefs(state);

// 表单校验规则
const rules = computed(() => ({
  rectifyMeasure: [{ required: true, message: "整改措施不能为空", trigger: "change" }],
  rectifyPictures: [{ required: true, message: "整改后图片不能为空", trigger: "blur" }]
}));

// 打开弹窗
const openDialog = async () => {
  formRef.value.resetFields();
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  formValue.value.rectifyUser = userInfo.username + "-" + userInfo.realName;
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
// 新的图片列表
const changePhotoList = val => {
  formValue.value.rectifyPictures = val;
};
// 图片是否上传完，是否可以保存
const savePhotoStatus = val => {
  photoStatusFlag.value = val;
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const params = formValue.value;
      params.missingId = props.missingId;
      const arr = [];
      if (formValue.value.rectifyPictures && formValue.value.rectifyPictures.length > 0) {
        formValue.value.rectifyPictures.forEach(item => {
          if (item?.id) {
            arr.push(item.id);
          } else if (item?.response.data.id) {
            arr.push(item.response.data.id);
          }
        });
      }
      params.rectifyPicture = arr.toString();
      await rectifyDefect(params);
      PxMessage.success("缺失整改成功");
      emits("closeDialog");
    }
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-dialog.scss");
</style>
